<template>
  <el-drawer
    :title="'编辑数据点'"
    :visible.sync="drawerVisible"
    :size="'600px'"
    custom-class="data-element-drawer"
  >
    <div class="drawer-body">
      <el-form ref="dataForm" :rules="modelRules" :model="dataElementModel" label-width="180px">
        <el-form-item label="位号" prop="code">
          <div class="static-text">{{ dataElementModel.code || '无' }}</div>
        </el-form-item>
        <el-form-item label="指标编码" prop="itemCode">
          <el-input v-model="dataElementModel.itemCode" placeholder="指标编码"/>
        </el-form-item>
        <el-form-item label="是否上传数据" prop="uploadData">
          <el-switch v-model="dataElementModel.uploadData"></el-switch>
        </el-form-item>
        <el-form-item label="是否上传告警" prop="uploadAlarm">
          <el-switch v-model="dataElementModel.uploadAlarm"></el-switch>
        </el-form-item>
      </el-form>
    </div>
    <div class="drawer-footer">
      <el-button @click="close()">取消</el-button>
      <el-button type="primary" :loading="isSubmitLoading" @click="save()">提交</el-button>
    </div>
  </el-drawer>
</template>
<script>
  import { updateNorthboundDataElement } from "@/api/northbound";
  export default {
    props: {},
    data() {
      return {
        drawerVisible: false,
        dataElementModel: {},
        isSubmitLoading: false,
        isEdit: false,
        isCreate: false,
        modelRules: {
          name: [{ required: true, trigger: "blur", message: "请输入数据源名称" }],
          itemCode: [{ required: true, trigger: "blur", message: "请输入指标编码" }]
        }
      };
    },
    computed: {},
    watch: {},
    mounted() {
    },
    methods: {
      show(row) {
        this.resetModal();
        this.isSubmitLoading = false;
        if (row) {
          this.dataElementModel = row;
        }
        this.drawerVisible = true;
      },
      clearValidate() {
        this.$nextTick(() => {
          this.$refs["dataForm"].clearValidate();
        })
      },
      resetModal() {
        this.dataElementModel = {};
        this.clearValidate();
      },
      save() {
        this.isSubmitLoading = true;
        this.$refs["dataForm"].validate(valid => {
          if (valid) {
            //
            updateNorthboundDataElement(this.dataElementModel)
              .then(() => {
                this.$message({
                  message: "编辑成功",
                  type: "success"
                });
                this.isSubmitLoading = false; // 无论成功失败，都把按钮的loading状态取消
                this.close();
                this.$emit("save");
              })
              .catch(() => {
                this.isSubmitLoading = false; // 无论成功失败，都把按钮的loading状态取消
              });
          } else {
            this.isSubmitLoading = false;
            this.$message({
              message: this.$t("formIsNotValidMessage"),
              type: "warning"
            });
          }
        });
      },
      close() {
        this.drawerVisible = false;
        this.isSubmitLoading = false; // 无论成功失败，都把按钮的loading状态取消
      }
    }
  };
</script>

<style lang="scss">
  .data-element-drawer {
    .el-drawer__body {
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    .drawer-body {
      flex: 1;
      overflow: auto;
      padding-bottom: 56px;

      .el-input {
        max-width: 360px;
      }

      .el-select {
        width: 360px;
      }
    }

    .drawer-footer {
      padding: 10px;
      background-color: #eef1f6;
      text-align: right;

      button {
        min-width: 100px;
      }
    }
  }

  .static-text {
    display: inline-block;
  }

  .tips-text {
    display: inline-block;
    font-size: small;
    margin-left: 5px;
    color: #999999;
  }
</style>
